import {useEffect, useState} from 'react';
import store from './store';
import { hot } from 'react-hot-loader/root';
import './index.less';

const App = hot(
    ()=>{
        const [countA, setCountA] = useState(0)
        const [countB, setCountB] = useState(0)
        // 当store里的值发生改变时
        // 订阅
        store.subscribe(()=>{
            setCountA(store.getState().a) 
            setCountB(store.getState().b) 
        })
       
        // 第一次加载
        useEffect(() => {
            setCountA(store.getState().a) 
            setCountB(store.getState().b) 
        }, [])
        
        const addHanlde=()=>{
            store.dispatch(
          
                (dispatch)=>{
                    setTimeout(()=>{
                    dispatch({type:"A/ADD"}) 
                },1000)
                }
          
            )
        }
    
        return (
            <div className='red_font'>
                <p>{countA}</p>
                <p>{countB}</p>
                <button onClick={addHanlde}>延迟加222</button>
                <button onClick={()=> store.dispatch({type:"B/ADD"})}>加1</button>
                <button onClick={()=> store.dispatch({type:"MINUS"})}>减1</button>
            </div>
        )
}
)

reactDOM.render(<App/>,document.getElementById('root'))